<template>
  <div class="controlPoint">
    <el-dialog v-model="editDialogVisible" title="编辑控制点" width="300px">
      <el-form :model="editControlPoint" ref="editFormRef" :rules="editFormRules" label-width="100px">
        <el-form-item label="点名" prop="pointName">
          <el-input v-model="editControlPoint.pointName"></el-input>
        </el-form-item>
        <el-form-item label="坐标X" prop="coordinateX">
          <el-input v-model="editControlPoint.coordinateX"></el-input>
        </el-form-item>
        <el-form-item label="坐标Y" prop="coordinateY">
          <el-input v-model="editControlPoint.coordinateY"></el-input>
        </el-form-item>
        <el-form-item label="高程H" prop="elevationH">
          <el-input v-model="editControlPoint.elevationH"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editControlPoint.description"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateControlPoint">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import {updateControlPointById} from "@/apis/api_controlPoint.js";


// 编辑对话框显示状态
const editDialogVisible = ref(false);



// 编辑控制点的表单数据
const editControlPoint = reactive({
  id: null,
  pointName: "",
  coordinateX: "",
  coordinateY: "",
  elevationH: "",
  description: "",
});

// 添加表单验证规则
const addFormRules = {
  pointName: [
    { required: true, message: "点名不能为空", trigger: "blur" },
  ],
};

// 编辑表单验证规则
const editFormRules = {
  pointName: [
    { required: true, message: "点名不能为空", trigger: "blur" },
  ],
};

// 打开编辑对话框
const openEditDialogVisible = (row) => {

  // 将行数据赋值给编辑表单数据
  editControlPoint.id = row.id;
  editControlPoint.pointName = row.pointName;
  editControlPoint.coordinateX = row.coordinateX;
  editControlPoint.coordinateY = row.coordinateY;
  editControlPoint.elevationH = row.elevationH;
  editControlPoint.description = row.description;

  editDialogVisible.value = true;
};


const emit=defineEmits(["getData"]);


// 更新控制点方法
const updateControlPoint = async () => {
  try {
    const res = await updateControlPointById(editControlPoint);
    console.log(res);
    if(res.flag){
      ElMessage.success("更新控制点成功");
      editDialogVisible.value = false;
      emit("getData");
    }else {
      ElMessage.error("更新控制点失败，请重试");
    }


  } catch (error) {
    ElMessage.error("更新控制点失败，请重试");
    console.error(error);
  }
};

defineExpose({  openEditDialogVisible });
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}
</style>